<template>
	<view>
		<view class="dingdan">
			<input type="text" placeholder="输入订单编号" class="search">
			<view class="qingkuang">
				<h2>订单基本情况：</h2>
				<view class="qkCont">
					<view class="qkCont-left">
						<view class="">
							<text>订单编号：</text>
							<text>{{this.dataList[0].orderId}}</text>
						</view>
						<view class="">
							<text>收货人：</text>
							<text>{{this.dataList[0].realName}}</text>
						</view>
						<view class="">
							<text>清关费：</text>
							<text>{{this.dataList[0].unmixedCost}}元</text>
						</view>
						<view class="">
							<text>收货地址：</text>
							<text>{{this.dataList[0].userAddress}}</text>
						</view>
					</view>
					<view class="qkCont-right">
						<view class="">
							<text>购买时间：</text>
							<text>{{this.dataList[0].payTime}}</text>
						</view>
						<view class="">
							<text>电话：</text>
							<text>{{this.dataList[0].userPhone}}</text>
						</view>
						<view class="">
							<text>金额：</text>
							<text>{{this.dataList[0].payPrice}}元</text>
						</view>
					</view>
				</view>
				<view class="pingzheng">
					<text>支付凭证：</text>
					<u-album :urls="urls" rowCount="5"></u-album>
				</view>
			</view>

			<!-- 详情 -->
			<view class="xiangqing">
				<h2>订单商品详情</h2>
				<view class="xqCont">
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center">序号</uni-th>
							<uni-th align="center">商品名称</uni-th>
							<uni-th align="center">是否拣货</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in dataList" :key="index">
							<uni-td align="center">{{item.productId}}</uni-td>
							<uni-td align="center">{{item.productName}}</uni-td>
							<uni-td align="center">
								<view :class="item.picking == 0?'statusColor':item.picking == 1?'statusColor1':'statusColor2'">
									{{item.picking == 0?"未拣货":item.picking == 1?"拣货中":"已完成"}}
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
					<uni-pagination title="" page-size="5" :total="total" :current="current"
						@change="change"></uni-pagination>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="bottomBtn">
				<text @click="cancel()">取消</text>
				<text @click="save">保存</text>
				<text @click="complete">完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				total: 0,
				current: 0,
				fileList6: [],
				page: {
					tolal: '',
					pageSize: 5,
					pageNum: 1
				},
				urls: [
					// 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 'https://cdn.uviewui.com/uview/album/2.jpg',
					// 'https://cdn.uviewui.com/uview/album/3.jpg',
					// 'https://cdn.uviewui.com/uview/album/4.jpg',
				],
				// 订单详情列表
				dataList: [],
			}
		},
		onShow() {
			this.getData()
		},
		// 监听页面下拉刷新
		onLoad(item){
			console.log(item.orderId);
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();this.getData()
		},
		methods: {
			// 订单详情列表接口
			getData() {
				const ordernumber = uni.getStorageSync("orderNumber")
				this.$requestPostMethod(this.$serverData.baseUrl + `/cashier/details`, {
					page: this.page.pageNum,
					pageSize: this.page.pageSize,
					orderNumber: ordernumber
				}).then(res => {
					console.log(res);
					this.dataList = res
					this.urls.push(this.dataList[0].payImag)
					console.log();
				})
			},
			// 取消操作
			cancel() {
				let ordernumber1 = uni.getStorageSync("orderNumber")
				this.$requestGetMethod(this.$serverData.baseUrl + `/cashier/cancel/`+odernumber1,{
					
				}).then(res => {
					console.log(res);
				})
			},
			// 保存操作
			save() {
				const ordernumber2 = uni.getStorageSync("orderNumber")
				this.$requestPostMethod(this.$serverData.baseUrl + `/cashier/saveStatus`, {
					orderNumber: ordernumber2,
				}).then(res => {
					console.log(res);
				})
			},
			// 监听分页器的变化
			change(e) {
				console.log(e)
				this.current = e.current
			},


		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		width: 100%;
		height: 60rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		right: 0;
		background: #fff;

		view {
			flex: 1;
			border: 1rpx solid #1684FC;
			color: #333;
			text-align: center;
			font-family: PingFang SC;
			font-size: 18rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 60rpx;
		}

		view:nth-child(1) {
			border-right: none;
		}

		view:nth-child(2) {
			border-right: none;
		}

		.bottomActive {
			background: #1684FC;
			color: #FFF;
			text-align: center;
			font-family: PingFang SC;
			font-size: 18rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 60rpx;
		}
	}



	.dingdan {
		padding-bottom: 100rpx;

		.search {
			height: 30rpx;
			margin: 28rpx;
			padding: 15rpx;
			border-radius: 8rpx;
			border: 1px solid #D9DBE0;
			background: #FFF;
			background: url("/static/images/搜索 1.png") no-repeat;
			background-position: 99% 50%;
		}

		.qingkuang {
			margin: 20rpx 28rpx;

			h2 {
				margin: 20rpx 0 28rpx 20rpx;
			}

			.qkCont {
				display: flex;
				justify-content: space-between;

				.qkCont-left {
					margin-left: 20rpx;

					view {
						margin-bottom: 10rpx;

						text:nth-child(1) {
							color: #333;
							font-family: PingFang SC;
							font-size: 14rpx;
							font-style: normal;
							font-weight: bold;
							line-height: normal;
						}

						text:nth-child(2) {
							color: #666;
							font-family: PingFang SC;
							font-size: 14rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						}
					}
				}

				.qkCont-right {
					margin-right: 100rpx;

					view {
						margin-bottom: 10rpx;

						text:nth-child(1) {
							color: #333;
							font-family: PingFang SC;
							font-size: 14rpx;
							font-style: normal;
							font-weight: bold;
							line-height: normal;
						}

						text:nth-child(2) {
							color: #666;
							font-family: PingFang SC;
							font-size: 14rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						}
					}
				}
			}

			.pingzheng {
				margin-left: 20rpx;
				display: flex;

				text {
					color: #333;
					font-family: PingFang SC;
					font-size: 14rpx;
					font-style: normal;
					font-weight: bold;
					line-height: normal;
				}
			}
		}

		.xiangqing {
			margin: 30rpx 28rpx;

			h2 {
				margin: 20rpx 0 28rpx 20rpx;
			}

			.xqCont {
				margin: 0 20rpx;
				.statusColor {
					color: #F56C6C;
				}
				.statusColor1 {
					color: #E6A23C;
				}
				.statusColor2 {
					color: #67C23A;
				}
			}
		}

		.bottomBtn {
			height: 40rpx;
			display: flex;
			margin: 46rpx 30rpx 0;

			text {
				flex: 1;
				text-align: center;
				line-height: 40rpx;
			}

			text:nth-child(1) {
				background: #fff;
				color: #333;
				font-family: PingFang SC;
				font-size: 18rpx;
				font-style: normal;
				font-weight: bold;
			}

			text:nth-child(1):active {
				background: #ccc;
			}

			text:nth-child(2) {
				background: #67C23A;
				color: #FFF;
				font-family: PingFang SC;
				font-size: 18rpx;
				font-style: normal;
				font-weight: bold;
			}

			text:nth-child(2):active {
				background: #55aa00;
			}

			text:nth-child(3) {
				background: #1684FC;
				color: #FFF;
				font-family: PingFang SC;
				font-size: 18rpx;
				font-style: normal;
				font-weight: bold;
			}

			text:nth-child(3):active {
				background: #0066ff;
			}
		}
	}
</style>